<template>
  <view class="apply-container">
    <view class="section-title">申请记录</view>
    <!-- 状态筛选 -->
    <view class="filter-bar">
      <view class="filter-item" 
            v-for="(item, index) in statusOptions" 
            :key="index"
            :class="{ active: currentStatus === item.value }"
            @click="changeStatus(item.value)">
        {{item.label}}
      </view>
    </view>
    <!-- 申请列表 -->
    <view class="apply-list">
      <view class="apply-card" v-for="(item, idx) in applyList" :key="idx" @click="toDetail(item)">
        <view class="card-left">
          <image class="company-logo" :src="item.companyPic || '/static/default-company.png'" mode="aspectFill"></image>
        </view>
        <view class="card-content">
          <view class="job-title">{{item.vacancyName}}</view>
          <view class="job-company">{{item.companyName}}</view>
          <view class="job-meta">
            <text class="job-salary">{{item.salary}}</text>
            <text class="apply-time">{{formatDate(item.applyTime)}}</text>
          </view>
          <view class="apply-status" :class="item.status">{{getStatusText(item.status)}}</view>
          <view class="review-remark" v-if="item.reviewRemark">审核备注：{{item.reviewRemark}}</view>
          <view class="reject-reason" v-if="item.status === '拒绝' && item.rejectReason">
            拒绝理由：{{item.rejectReason}}
          </view>
        </view>
      </view>
    </view>
    <!-- 加载更多 -->
    <view class="load-more" v-if="hasMore" @click="loadMore">
      <text v-if="!loading">加载更多</text>
      <text v-else>加载中...</text>
    </view>
    <view class="no-more" v-else>已经到底了~</view>
  </view>
</template>

<script>
import { applyListByUser } from '../../utils/api/modules/vacancy';

export default {
  data() {
    return {
      applyList: [],
      currentStatus: '',
      pageNum: 1,
      pageSize: 10,
      hasMore: true,
      loading: false,
      statusOptions: [
        { label: '全部', value: '' },
        { label: '待审核', value: '待审核' },
        { label: '已通过', value: '通过' },
        { label: '已拒绝', value: '拒绝' }
      ]
    }
  },
  async onShow() {
    this.pageNum = 1;
    this.applyList = [];
    this.hasMore = true;
    await this.loadData();
  },
  methods: {
    async loadData() {
      if (this.loading) return;
      this.loading = true;
      
      try {
        const user = uni.getStorageSync('user');
        if (!user || !user.id) return;
        
        const res = await applyListByUser({
          userId: user.id,
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          status: this.currentStatus
        });
        
        if (this.pageNum === 1) {
          this.applyList = res.data.records;
        } else {
          this.applyList = [...this.applyList, ...res.data.records];
        }
        
        this.hasMore = res.data.records.length === this.pageSize;
        this.pageNum++;
      } finally {
        this.loading = false;
      }
    },
    async loadMore() {
      if (!this.hasMore || this.loading) return;
      await this.loadData();
    },
    changeStatus(status) {
      this.currentStatus = status;
      this.pageNum = 1;
      this.applyList = [];
      this.hasMore = true;
      this.loadData();
    },
    toDetail(item) {
      uni.navigateTo({ url: `/pages/vacancy/vacancy-detail?id=${item.jobId}` })
    },
    formatDate(date) {
      if (!date) return '';
      const d = new Date(date);
      return `${d.getFullYear()}-${(d.getMonth()+1).toString().padStart(2, '0')}-${d.getDate().toString().padStart(2, '0')}`;
    },
    getStatusText(status) {
      const statusMap = {
        '待审核': '待审核',
        '通过': '已通过',
        '拒绝': '已拒绝'
      };
      return statusMap[status] || status;
    }
  }
}
</script>

<style lang="scss">
.apply-container {
  background-color: #f7f8fa;
  min-height: 100vh;
  padding-bottom: 40rpx;
}

.section-title {
  padding: 30rpx 32rpx 20rpx;
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  background-color: #fff;
  border-bottom: 1rpx solid #f0f0f0;
}

.filter-bar {
  display: flex;
  padding: 20rpx 32rpx;
  background: #fff;
  margin-bottom: 20rpx;
  overflow-x: auto;
  white-space: nowrap;
}

.filter-item {
  padding: 10rpx 30rpx;
  margin-right: 20rpx;
  border-radius: 30rpx;
  font-size: 26rpx;
  color: #666;
  background: #f5f5f5;
  display: inline-block;
  
  &:last-child {
    margin-right: 0;
  }
}

.filter-item.active {
  background: #54bcbd;
  color: #fff;
}

.apply-list {
  padding: 0 24rpx;
}

.apply-card {
  display: flex;
  background: #fff;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.04);
  margin-bottom: 24rpx;
  padding: 28rpx;
  transition: all 0.2s;
  
  &:active {
    transform: scale(0.99);
    opacity: 0.9;
  }
}

.card-left {
  margin-right: 24rpx;
}

.company-logo {
  width: 100rpx;
  height: 100rpx;
  border-radius: 8rpx;
  background-color: #f5f5f5;
}

.card-content {
  flex: 1;
  min-width: 0;
}

.job-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 8rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.job-company {
  font-size: 26rpx;
  color: #666;
  margin-bottom: 12rpx;
}

.job-meta {
  display: flex;
  align-items: center;
  margin-bottom: 12rpx;
}

.job-salary {
  font-size: 28rpx;
  color: #ff6b6b;
  font-weight: bold;
  margin-right: 20rpx;
}

.apply-time {
  font-size: 24rpx;
  color: #999;
}

.apply-status {
  display: inline-block;
  font-size: 24rpx;
  padding: 6rpx 16rpx;
  border-radius: 4rpx;
  margin-bottom: 12rpx;
  
  &.待审核 {
    color: #faad14;
    background: #fffbe6;
  }
  
  &.通过 {
    color: #52c41a;
    background: #f6ffed;
  }
  
  &.拒绝 {
    color: #ff4d4f;
    background: #fff1f0;
  }
}

.review-remark, .reject-reason {
  font-size: 24rpx;
  color: #666;
  padding: 10rpx;
  background: #f5f5f5;
  border-radius: 4rpx;
  margin-top: 8rpx;
  line-height: 1.4;
}

.reject-reason {
  color: #ff4d4f;
  background: #fff1f0;
}

.load-more, .no-more {
  text-align: center;
  padding: 30rpx;
  color: #999;
  font-size: 26rpx;
}

.load-more {
  color: #54bcbd;
  
  &:active {
    opacity: 0.7;
  }
}
</style>